<template>
    <el-form ref="formRef" label-width="120px" :model="formData" :rules="formRules" :disabled="pageType == 'look'">
        <el-form-item label="参与客户打标" prop="join_cust_tags">
            <div>
                <el-tag
                    v-for="tag in AllTags"
                    :key="tag"
                    class="mx-1"
                    size="small"
                    style="margin-right: 5px"
                    :closable="pageType !== 'look'"
                    @close="onClose1(tag)">
                    {{ tag.name }}
                </el-tag>
            </div>
            <el-button @click="selecTag">选择标签</el-button>
        </el-form-item>
    </el-form>
    <BatchLabel ref="BatchLabelRef" :title-visible="false" @save="getTags" />
</template>

<script setup lang="ts">
import BatchLabel from '@/components/BatchLabel.vue';
import { ElMessage } from 'element-plus';
import { ref, defineExpose, defineProps, reactive } from 'vue';
import { getSetionId } from '@/utils/utils';
const BatchLabelRef: any = ref<null | HTMLElement>(null); // 选择标签弹框
interface Props {
    pageType: any;
}
withDefaults(defineProps<Props>(), {
    pageType: ''
});
const emit = defineEmits(['submit']);
const AllTags = ref([]);
const formRef = ref<any>(null);
const formData = ref({
    join_cust_tags: []
});
const formRules = reactive({
    join_cust_tags: [{ required: false, message: '请选择标签', trigger: 'change' }]
});
// 打开选择标签
const selecTag = () => {
    BatchLabelRef.value.hasConditiion = false;
    BatchLabelRef.value.dialogData.labelChooseType = 2;
    BatchLabelRef.value.chooseDataArr = [];
    BatchLabelRef.value.chooseDataArr = [...AllTags.value];
    BatchLabelRef.value.dialogVisible = true;
};
// 获取标签
const getTags = (data: any) => {
    AllTags.value = data.data;
    formData.value.join_cust_tags = getSetionId('id', data.data);
};
// 移除标签
const onClose1 = (tag: any) => {
    AllTags.value = AllTags.value.filter(item => item.id != tag.id);
    formData.value.join_cust_tags = getSetionId('id', AllTags.value);
};
const onSubmit = async () => {
    if (!formRef.value) return;
    await formRef.value.validate((valid: any, fields: any) => {
        if (valid) {
            emit('submit');
        } else {
            ElMessage.warning(Object.values(fields)[0][0].message);
        }
    });
};
defineExpose({
    formData,
    onSubmit,
    AllTags
});
</script>
